<template>
  <el-container class="home-container">
    <!-- 侧边栏 -->
    <el-aside class="home-aside" :width="isCollapse ? '64px' : '250px'">
      <div class="logo-wrapper">
        <img src="../../public/logo.svg" alt="" />
        <div
          class="logo-name"
          :style="{ width: isCollapse ? '0px' : 'calc(100% - 100px)' }"
        >
          <span>荔享家后台管理系统</span>
        </div>
      </div>

      <el-menu
        unique-opened
        background-color="#323744"
        text-color="#fff"
        active-text-color="#3899ff"
        :collapse="isCollapse"
        :collapse-transition="false"
        router
        :default-active="activePath"
      >
        <!-- 一级菜单 -->
        <el-submenu index="1">
          <!-- 一级菜单的模板 -->
          <template slot="title">
            <i class="el-icon-user-solid"></i>
            <span>用户管理</span>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item index="/users" @click="saveNavState('/users')">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>用户列表</span>
            </template>
          </el-menu-item>
        </el-submenu>

        <!-- 商品管理 -->
        <el-submenu index="3">
          <!-- 一级菜单的模板 -->
          <template slot="title">
            <i class="el-icon-s-goods"></i>
            <span>商品管理</span>
          </template>
          <!-- 二级菜单 -->

          <el-menu-item index="/goods" @click="saveNavState('/goods')">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>商品列表</span>
            </template>
          </el-menu-item>

          <el-menu-item index="/addGoods" @click="saveNavState('/addGoods')">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>添加商品</span>
            </template>
          </el-menu-item>
        </el-submenu>

        <!-- 订单管理 -->
        <el-submenu index="4">
          <!-- 一级菜单的模板 -->
          <template slot="title">
            <i class="el-icon-s-order"></i>
            <span>订单管理</span>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item index="/orders" @click="saveNavState('/orders')">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>订单列表</span>
            </template>
          </el-menu-item>
        </el-submenu>

        <!-- 支付管理 -->
        <el-submenu index="5">
          <!-- 一级菜单的模板 -->
          <template slot="title">
            <i class="el-icon-s-finance"></i>
            <span>支付管理</span>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item index="/pays" @click="saveNavState('/pays')">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>支付列表</span>
            </template>
          </el-menu-item>
        </el-submenu>

        <!-- 优惠券管理 -->
        <el-submenu index="6">
          <!-- 一级菜单的模板 -->
          <template slot="title">
            <i class="el-icon-s-ticket"></i>
            <span>惠券管理</span>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item index="/coupon" @click="saveNavState('/coupon')">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>惠券列表</span>
            </template>
          </el-menu-item>
        </el-submenu>

        <!-- 积分管理 -->
        <el-submenu index="7">
          <!-- 一级菜单的模板 -->
          <template slot="title">
            <i class="el-icon-s-marketing"></i>
            <span>积分管理</span>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item index="/score" @click="saveNavState('/score')">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>积分列表</span>
            </template>
          </el-menu-item>

          <el-menu-item
            index="/scoreExchange"
            @click="saveNavState('/scoreExchange')"
          >
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>积分兑换</span>
            </template>
          </el-menu-item>
        </el-submenu>

        <!-- 鉴赏管理 -->
        <el-submenu index="8">
          <!-- 一级菜单的模板 -->
          <template slot="title">
            <i class="el-icon-camera-solid"></i>
            <span>鉴赏管理</span>
          </template>
          <!-- 二级菜单 -->
          <el-menu-item index="/enjoy" @click="saveNavState('/enjoy')">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>鉴赏列表</span>
            </template>
          </el-menu-item>
          <el-menu-item index="/addEnjoy" @click="saveNavState('/addEnjoy')">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>添加鉴赏</span>
            </template>
          </el-menu-item>
        </el-submenu>

        <!-- 售后服务 -->
        <el-submenu index="9">
          <!-- 一级菜单的模板 -->
          <template slot="title">
            <i class="el-icon-question"></i>
            <span>售后服务</span>
          </template>
          <!-- 二级菜单 -->
          <!-- <el-menu-item index="/report" @click="saveNavState('/report')">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>售后列表</span>
            </template>
          </el-menu-item> -->

          <el-menu-item index="/afterSell" @click="saveNavState('/afterSell')">
            <template slot="title">
              <i class="el-icon-menu"></i>
              <span>客服咨询</span>
            </template>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </el-aside>
    <!-- 右侧主体 -->

    <el-container>
      <!-- 头部区域 -->
      <el-header>
        <div>
          <div class="toggle-button" @click="toggleCollapse">
            <i
              class="el-icon-s-fold"
              :class="!isCollapse ? 'toggle-btn-show' : 'toggle-btn-hidden'"
            ></i>
            <i
              class="el-icon-s-unfold"
              :class="isCollapse ? 'toggle-btn-show' : 'toggle-btn-hidden'"
            ></i>
          </div>
        </div>
        <div class="header-right">
          <el-button type="info" @click="logout">退出</el-button>
        </div>
      </el-header>
      <el-main>
        <!-- 路由占位符 -->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      // 是否折叠
      isCollapse: false,
      // 被激活的链接地址
      activePath: '/welcome'
    }
  },
  created() {
    this.activePath = window.sessionStorage.getItem('activePath')
  },
  methods: {
    async logout() {
      // 获取缓存数据
      let admin = localStorage.getItem('admin')
      if (!admin) return

      const token = localStorage.getItem('token')
      if (!token) return

      admin = JSON.parse(admin)

      const { data: res } = await this.$http.post('/logout', {
        user_id: admin.id,
        token: token
      })
      if (res.status !== 200) {
        this.$message.error(res.message)
        return
      }

      localStorage.clear()
      this.$message.success(res.message)

      // 强制跳转(重定向)回login页面
      this.$router.push('/login')
    },

    // 点击按钮，进行菜单折叠和张开
    toggleCollapse() {
      this.isCollapse = !this.isCollapse
    },
    // 保存链接的激活状态
    saveNavState(activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    }
  }
}
</script>

<style lang="less" scoped>
:deep(.el-card) {
  position: relative;
}
:deep(.el-card)::after {
  content: '';
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  position: absolute;
  // background-color: #323744;
  background-image: url(../../public/logo.svg);
  background-repeat: no-repeat;
  background-size: 30%;
  background-position: center;
  opacity: 0.1;
  pointer-events: none;
}

.home-container {
  height: 100%;
}

.el-header {
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
  align-items: center;
  color: #807d8a;
  > div {
    display: flex;
    align-items: center;
    span {
      margin-left: 15px;
    }
  }
}

.el-aside {
  background-color: #323744;
  .el-menu {
    border-right: none;
  }
}

.home-aside,
.logo-name,
.home-aside {
  transition: width 0.3s ease-in-out;
}

.logo-name {
  transition-delay: 0.1s;
}

.logo-wrapper {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: 900;
  margin-top: 5px;
  margin-bottom: 10px;

  img {
    margin-right: 5px;
    width: 40px;
    height: 40px;
  }

  .logo-name {
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    white-space: nowrap;
  }
}

.el-main {
  background-color: #eaedf2;
}

.toggle-button {
  line-height: 24px;
  font-size: 30px;
  text-align: center;
  letter-spacing: 0.2em;
  cursor: pointer;
  position: relative;
  background-color: #323744;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-left: 10px;
}

.toggle-btn-show,
.toggle-btn-hidden {
  transition: 0.3s ease-in-out;
  position: absolute;
}

.toggle-btn-show {
  opacity: 1;
}

.toggle-btn-hidden {
  opacity: 0;
}
</style>
